<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>用户登录</title>
    <meta name="keywords" th:content="${SITE_CONFIG.SITE_KWD}">
    <meta name="description" th:content="${SITE_CONFIG.SITE_DESC}">

    <link rel="stylesheet" th:href="@{/libs/font-icon/icon.css}"/>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
</head>
<body>
<div class="login-main">
    <div class="login-main-sub">
        <div class="login-logo">
            <div>
                <img th:src="@{/cweb/img/login-logo.png}">
            </div>
            <div>
                登录
            </div>
        </div>
        <div class="login-center">
            <div class="form-group form-inline">
                <input type="text" class="form-control" id="username" name="username" onkeypress="return hcsj(event);"
                       placeholder="输入帐号">
            </div>
            <div class="form-group form-inline">
                <input type="password" class="form-control" id="password" name="password" onkeypress="return hcsj(event);"
                       placeholder="输入密码">
            </div>
            <div class="form-group form-inline">
                <input type="text" class="form-control" id="verification-font" name="verification" placeholder="请输入验证码" onkeypress="return hcsj(event);"
                       style="width: 68%">
                <img class="pointer vcode-img" style="width: 30%; height: 44px; display: inline">
            </div>

            <div class="login-forget">
                <span onclick="forget_password();">忘记密码？</span>
            </div>
            <button type="button" id="login_button" class="btn btn-primary l-bth">登录</button>
        </div>
        <hr/>
        <div class="login-footer">
            <div class="no-text">没有帐号？</div>
            <button type="button" id="login_regist" class="btn btn-primary">注册</button>
        </div>
    </div>
</div>
<script>
    $(function () {
        $('#login_button').click(function () {
            loginConfirm();
        });

        $('#login_regist').click(function () {
            userRegist();
        });


        $(".vcode-img").on('click', function () {
//            var url = '/Creditgt.jpg?d='+Math.random();
//            $(this).attr('src',url);
            $(".vcode-img").attr('src', (ctx + '/verificationCode?').replace('//', '/') + Math.floor(Math.random() * 100));
        });

        $(".vcode-img").click();
    });

    function forget_password() {
        zeroModal.closeAll();
        zeroModal.show({
            title: '',
            width: '465px',
            url: '[[@{/blog/forget}]]',
            height: '600px'
        });
    }

    function loginConfirm() {
        let username = $('#username').val();
        if (!username) {
            layer.msg("请输入手机号！")
            return;
        }

        if (!checkPhone(username)) {
            layer.msg("请输入正确的手机号！")
            return;
        }

        let password = $('#password').val();

        if (!password) {
            layer.msg("请输入密码！")
            return;
        }

        let verification_font = $('#verification-font').val();
        if (!verification_font) {
            layer.msg("请输入验证码！")
            return;
        }

        //登录
        Core.postAjax("/blog/api/login/input", {
            username: username,
            password: password,
            code: verification_font
        }, function (data) {
            layer.msg(data.msg, {
                offset: '30%',
                time: 800
            }, function () {
                if (data.status == 200) {
                    //刷新当前页面
                    location.reload();
                    console.info(data);
                } else {
                    $(".vcode-img").click();
                }
            });
        });
    }

    function checkPhone(phone) {
        if (!(/^1[34578]\d{9}$/.test(phone))) {
            return false;
        }
        return true;
    }

    //回车
    function hcsj(e) {
        let keyCode = null;

        if (e.which) {
            keyCode = e.which;
        } else if (e.keyCode) {
            keyCode = e.keyCode;
        }

        if (keyCode == 13) {
            loginConfirm();
            return false;
        }

        return true;
    }

</script>
</body>
</html>